<template>
  <div class="pictureDetailsView d-flex align-items-center">
    <a-row :gutter="[16, 16]">
      <a-col :sm="24" :md="12">
        <a-card title="图片预览">
          <a-image :src="picture.url" style="max-height: 400px; object-fit: contain" />
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12">
        <a-card title="图片信息">
          <a-descriptions :column="1">
            <a-descriptions-item label="上传者信息">
              <a-space>
                <a-avatar :size="48" :src="picture.user?.userAvatar" />
                <!--                <img :src="picture.user?.userAvatar" style="max-width: 50px; border-radius: 50%" />-->
                <div>{{ picture.user?.userName }}</div>
              </a-space>
            </a-descriptions-item>
            <a-descriptions-item label="图片名称">{{
              picture.pictureName ?? '未命名'
            }}</a-descriptions-item>
            <a-descriptions-item label="图片简介">{{
              picture.introduction ?? '-'
            }}</a-descriptions-item>
            <a-descriptions-item label="类别">
              {{ picture.category ?? '默认' }}
            </a-descriptions-item>
            <a-descriptions-item label="标签">
              <a-tag v-for="tag in picture.tags" :key="tag">
                {{ tag }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="格式">{{ picture.picFormat }}</a-descriptions-item>

            <a-descriptions-item label="宽度">
              {{ picture.picWidth ?? '未知' }}
            </a-descriptions-item>
            <a-descriptions-item label="高度">
              {{ picture.picHeight ?? '未知' }}
            </a-descriptions-item>
            <a-descriptions-item label="宽高比">
              {{ picture.picScale ?? '未知' }}
            </a-descriptions-item>
            <a-descriptions-item label="大小">
              {{ formatSize(picture.picSize) ?? '未知' }}
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
        <a-space v-if="userAuth" style="margin-left: 2vw">
          <a-button
            :icon="h(EditOutlined)"
            type="primary"
            @click="toEdit(picture.id)"
            style="
              font-family: 站酷快乐体2016修订版;
              font-size: 20px;
              margin: 0 auto;
              padding: 0px;
              width: 120px;
              display: flex;
              justify-content: center;
            "
            >编辑</a-button
          >
          <a-button
            @click="toDelete(picture.id)"
            style="
              font-family: 站酷快乐体2016修订版;
              font-size: 20px;
              margin: 0 auto;
              padding: 0px;
              width: 120px;
              display: flex;
              justify-content: center;
            "
            danger
            ><DeleteOutlined />删除</a-button
          >
        </a-space>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { computed, h, nextTick, onMounted, ref } from 'vue'
import { deletePictureByid, getbypicturevoid } from '@/api/picture.js'
import { message } from 'ant-design-vue'
import { formatSize } from '../../utils/index.js'
import $ from 'jquery'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import router from '@/router/index.js'
import { useLoginStore } from '@/stores/loginStore.js'
const props = defineProps({
  id: 0,
})

const picture = ref('')
setTimeout(() => {
  console.log('图片: ', props.id)
  fetchPictureById()
}, 30)
const fetchPictureById = async () => {
  try {
    const res = await getbypicturevoid({
      id: props.id,
    })
    if (res.data.code === 0 && res.data.data) {
      picture.value = res.data.data
    } else {
      message.error(res.data.message)
    }
  } catch (e) {
    message.error(e.message)
  }
}
const toEdit = (id) => {
  authCheck()
  if (userAuth.value) router.push(`/picture/add?id=${id}`)
}

const toDelete = async (id) => {
  authCheck()
  if (userAuth.value) {
    try {
      const res = await deletePictureByid({
        id,
      })
      if (res.data.code === 0 && res.data.data === true) {
        message.success('删除成功')
        router.back()
      } else {
        message.error(`很抱歉，删除失败，原因：${res.data.message}`)
      }
    } catch (e) {
      message.error(e.message)
    }
  }
}
/*onMounted(async () => {
  await nextTick()
  await fetchPictureById()
})*/

const userAuth = ref(false) //控制权限,true表示可以展示编辑和删除
const authCheck = () => {
  const loginUser = useLoginStore().loginUser

  if (!loginUser?.id) {
    userAuth.value = false
    return
  }
  //仅上传者本人或者管理员给权限
  if (Number(picture?.value.userId) != loginUser.id && loginUser.userRole !== 'admin') {
    userAuth.value = false
    return
  }
  userAuth.value = true
}

onMounted(() => {
  // $('.anticon').addClass('d-flex align-items-center')
  /*  var btnElementArr = document.getElementsByClassName('anticon')
  console.log('btnElementArr', btnElementArr)
  for (var btnElement of btnElementArr) {
    btnElement.addClass('d-flex align-items-center')*/
  $('.ant-descriptions-item-container').addClass('d-flex align-items-center')
  setTimeout(() => {
    authCheck()
  }, 100)
})
</script>
<style>
@media (max-width: 768px) {
  .pictureDetailsView {
    padding: 0 1vw;
  }
}
.pictureDetailsView {
  background-color: rgba(28, 29, 30, 0.5);
  border-radius: 30px;
  border: solid 2px rgba(211, 211, 211, 0.3);
  background-position: center;
  backdrop-filter: blur(20px);
  padding: 0 2vw;
  width: 90%;
  min-height: 80vh;
  margin: 4vh auto 0;
}
/*.pictureDetailsView {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}*/

.pictureDetailsView .ant-card-body {
  display: flex;
  justify-content: center;
}

/*.pictureDetailsView .ant-card {
  background: linear-gradient(
    135deg,
    rgba(0, 235, 255, 0.4),
    rgba(0, 235, 255, 0.5) 70.32%,
    rgba(154, 143, 211, 0.5) 90.02%,
    rgba(157, 143, 246, 0.6)
  );
  border-radius: 1rem;
  border: none;
}*/
@media (min-width: 768px) {
  .pictureDetailsView .ant-card {
    background-color: transparent;
    border: none;
  }
  .ant-card-head-title {
    color: white;
    font-family: 站酷快乐体2016修订版;
    font-size: 20px;
  }

  .pictureDetailsView .ant-descriptions-item-label {
    color: white;
    font-family: 站酷快乐体2016修订版;
    font-size: 15px;
  }

  .pictureDetailsView .ant-descriptions-item-content {
    color: white;
  }

  .pictureDetailsView .ant-tag {
    color: white;
  }
}

.pictureDetailsView .anticon {
  display: flex;
  align-items: center;
}
</style>
